<!-- demo测试专用的页面 -->
<template>
  <div id="demo">
    <div class="header_btn">
      <div @click="ruleBtn"> <img src="./assets/img/icon.png" alt=""> 活动规则</div>
      <div @click="prion"> <img src="./assets/img/paion.png" alt="">我的奖品</div>
    </div>
        <div class="number">您还有 <span>{{num}}</span>次抽奖机会</div>
    <div class="box">
      <vue-big-wheel
        ref="luckyWheel"
        :colors = 'colors'
        fontColor = '#fff'
        goClassName = 'btn'
        :strMaxLength = '13'
        :strLineLength = '6'
        strKey='name'
        @go-click = "go"
        @on-over = "onOver"
      >
      </vue-big-wheel>
    </div>
    <div class="error" v-if="flay">{{message}}</div>
    <rulePrompt class="rulebox" v-if="prompt" :contentText="contentText" :status="status" @clone_btn = 'clone'></rulePrompt>
    <prompt @confirm_btn="confirm" class="promptbox" v-if="showToast" :name='name' :status='status1'></prompt>
  </div>
</template>

<script>
import vueBigWheel from "@/components/vue-big-wheel/index";
import rulePrompt from './components/vue-big-wheel/rulePrompt'
import prompt from './components/vue-big-wheel/prompt'
export default {
  data() {
    return {
      listData: [
        {name: "iphone 6s", val: 1},
        {name: "马来西亚一周游", val: 2},
        {name: "谢谢参与", val: 0},
        {name: "满10减5购物券", val: 3},
        {name: "谢谢参与", val: 0},
        {name: "全球限量定制版GTX2080Ti显卡", val: 8},
        {name: "10元话费充值券", val: 4},
        {name: "谢谢参与", val: 0},
      ],
      colors: ["#f7a172", "#ff8584"],
      targetIndex: 0,
      // fontColor:
      contentText:'',
      status:true,
      prompt:false,
      showToast:false,
      num:null,
      flay:false,  
      message:'',
      name:'',
      status1:true,
      shop:true
    };
  },
  created(){
    
    console.log(location.href,"===>123123")
    // 抽奖列表信息
    // this.$http.get("/api/v2/member/prize/prizelist?activityid=1").then(res=>{
    //   if(res.status==0){
    //     res.data.forEach((element,index) => {
    //       element.name = element.prize_name
    //       element.val = index
    //     });
    //       this.listData = res.data
    //       console.log(this.listData)
    //   }
    // })
    this.number()
  },
  mounted() {
      this.prionRule()
  },
  methods: {
    // 抽奖规则
    prionRule(){
      this.$http.get("/api/v2/member/prize/activityinfo?activityid=1").then(res=>{
        if(res.status==0){
          this.contentText = res.data.activity_desc
        }
      })
    },
        // 抽奖次数
    number(){
        this.$http.get("/api/v2/member/prize/lotterynumber?activity_id=1").then(res=>{
          if(res.status == 0){
            this.num = 1
            this.shop = true
          }else{
            this.num = 0
            this.shop = false
              this.flay=true
              this.message = res.error
              console.log("error")
              setTimeout(() => {
                this.flay = false
              }, 2000);
          }
          
        })
    },
    // 跳转小程序
    prion(){
      wx.miniProgram.navigateTo({url: '/pages/my/rewardList_dzp'})
    },
    
    //抽奖返回
    confirm(){
      this.showToast = false
    },
    //规则弹窗
    ruleBtn(){
      this.prompt = true
    },
    onOver() {
      console.log(this.listData,this.targetIndex,"====121313")
      this.name = this.listData[this.targetIndex].name
      this.showToast = true
    },
    go(event) {
      if(!this.shop){
        this.flay = true
        setTimeout(() => {
            this.flay = false
        }, 1000);
        return false
      }
      console.log(event,"====")
      this.listData = event
      console.log("TCL: go -> event", event)
      // 模拟请求 200ms
      // setTimeout(() => {
      //   // 随机
      //   this.targetIndex = Math.floor(Math.random() * this.listData.length)
			// 	console.log("TCL: go -> this.targetIndex", this.targetIndex)
      //   this.$refs.luckyWheel.rotateFunc(this.targetIndex)
      // }, 200);
      this.$http.post(`/api/v2/member/prize?activity_id=${1}`).then(res=>{
            // this.targetIndex = Math.floor(Math.random() * this.listData.length)
            if(res.status == 0){
              console.log()
                    let index
                    console.log(event,"===>")
                    if(res.data.pl_prizesatust==1){
                      this.status1 = true
                    }else{
                      this.status1 = false
                    }
                    console.log(this.status1,"stauts")
                    event.forEach(element => {
                      if(element.prize_id==res.data.pl_prizeid){
                        console.log(element.pl_prizeid,res.data.pl_prizeid,"2312312")
                        index = element.index
                        this.targetIndex = index
                      }
                    });
                    this.$refs.luckyWheel.rotateFunc(this.targetIndex)
                    console.log(index)
                    if(res.data.prize_status==0){
                        this.status = false
                    }else{
                       this.status = true
                    }
            }else{
              this.flay=true
              this.message = res.error
              console.log("error")
              setTimeout(() => {
                this.flay = false
              }, 2000);
            }
          
      })
    },
    clone(event){
      console.log(event,"====")
      this.prompt = false
    }

  },
  components: {
    vueBigWheel,
    rulePrompt,
    prompt
  }
};
</script>
<style  lang='scss'>
#demo {
  .error{
    width: 0.8rem;
    height: 0.3rem;
    background:#fff;
    position: absolute;
    top: 3.2rem;
    left: 1.5rem;
    font-size: .12rem;
    text-align: center;
    line-height: 0.3rem;
    opacity: .6;
  }
  .rulebox{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 10;
    top: 0;
  }
  .promptbox{
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 10;
    top: 0;
  }
  width: 100vw;
  min-height: 100vh;
  background-image: url('./assets/img/3.jpg');
  background-repeat: no-repeat;
  // background-position: center top;
  background-size: 100% 100%;
  overflow: hidden;
  .box {
    box-sizing: border-box;
    width: 100%;
    // height: 100%;
    // margin: 2.8rem auto 0;
    position: fixed;
    bottom: -.05rem;
    padding: .5rem;
    background-image: url('./assets/img/2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    // overflow: hidden;
    .btn { // 使用自定义类 不能用scope
      width: .75rem;
    }
  }
  .number{
    font-size:.2rem;
    color: #fff;
    position: absolute;
    top:2.7rem;
    left: 1rem
  }
  .number span{
    color: red;
  }
  .header_btn{
    height: .6rem;
    margin-top: .15rem;
    display: flex;
    justify-content: space-between;
    padding: 0 .3rem;
    div{
    width:1rem;
    height:.25rem;
    border:1px solid rgba(255,255,255,1);
    border-radius:.30rem;
    text-align: center;
    line-height: .25rem;
    font-size:.14rem;
    color: #fff;
    img{
      width: .15rem;
      height:.15rem;
      display: inline-block ;
      margin-right: .07rem
    }
  }
  }
  
}
</style>
